<template>
  <view>
    <view class="debug-info" v-if="false">
      visible: {{visible}}
    </view>
    
    <view class="wx-login-popup" v-if="visible">
      <view class="wx-login-mask" @tap="handleMaskClick"></view>
      <view class="wx-login-container">
        <view class="wx-login-header">
          <text class="wx-login-title">{{ title }}</text>
          <view class="wx-login-close" @tap="handleClose">
            <text class="wx-login-close-icon">×</text>
          </view>
        </view>
        
        <view class="wx-login-content">
          <image class="wx-login-logo" :src="logo || '/static/logo.png'" mode="aspectFit"></image>
          <text class="wx-login-desc">{{ desc }}</text>
          
          <view class="wx-login-btn-container">
            <!-- 第一步：获取用户信息 -->
            <button 
              v-if="loginStep === 1"
              class="wx-login-btn" 
              @tap="handleGetUserProfile"
              :disabled="loading"
            >
              <view class="wx-login-btn-inner">
                <text class="wx-icon wx-icon-weixin"></text>
                <text>{{ loading ? '授权中...' : '微信授权登录' }}</text>
              </view>
            </button>
            
            <!-- 第二步：获取手机号 -->
            <button 
              v-if="loginStep === 2"
              class="wx-login-btn" 
              open-type="getPhoneNumber" 
              @getphonenumber="handleGetPhoneNumber"
              :disabled="loading"
            >
              <view class="wx-login-btn-inner">
                <text class="wx-icon wx-icon-phone"></text>
                <text>{{ loading ? '获取中...' : '授权手机号完成注册' }}</text>
              </view>
            </button>
            
            <!-- <view class="wx-login-other-options" v-if="showOtherOptions">
              <text class="wx-login-other-text" @tap="handleOtherLogin">其他登录方式</text>
            </view> -->
          </view>
        </view>
        
        <view class="wx-login-privacy">
          <checkbox 
            :checked="privacyChecked" 
            @tap="togglePrivacy" 
            color="#ec4899"
            class="wx-login-checkbox"
          ></checkbox>
          <text class="wx-login-privacy-text">
            登录即表示您已阅读并同意
            <text class="wx-login-privacy-link" @tap="handleViewPrivacy">《用户协议》</text>
            和
            <text class="wx-login-privacy-link" @tap="handleViewTerms">《隐私政策》</text>
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue';
import { useCool, useStore } from '/@/cool';
import { useWx } from '/@/cool';

// 定义组件属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '微信登录'
  },
  desc: {
    type: String,
    default: '登录后体验更多功能'
  },
  logo: {
    type: String,
    default: ''
  },
  showOtherOptions: {
    type: Boolean,
    default: true
  },
  maskClosable: {
    type: Boolean,
    default: true
  }
});

// 定义事件
const emit = defineEmits([
  'update:visible',
  'close',
  'success',
  'fail',
  'otherLogin'
]);

const { service } = useCool();
const { user } = useStore();
const wx = useWx();

// 状态变量
const loading = ref(false);
const privacyChecked = ref(true);
const loginStep = ref(1); // 1: 获取用户信息, 2: 获取手机号
const userProfileInfo = ref<any>(null);

// 切换隐私协议勾选状态
function togglePrivacy() {
  privacyChecked.value = !privacyChecked.value;
}

// 处理蒙层点击
function handleMaskClick() {
  if (props.maskClosable) {
    handleClose();
  }
}

// 关闭弹窗
function handleClose() {
  // 重置状态
  loginStep.value = 1;
  userProfileInfo.value = null;
  emit('update:visible', false);
  emit('close');
}

// 登录请求
async function reqLogin(key: 'mini' | 'mp' | 'uniPhone' | 'phone', data: any) {
  try {
    // 调用登录接口
    const res = await service.user.login[key](data);
    
    // 设置token
    user.setToken(res);
    
    // 获取用户信息
    await user.get();
    
    // 触发成功事件
    emit('success', res);
    
    // 关闭弹窗
    handleClose();
    
    return res;
  } catch (err: any) {
    wx.getCode();
    emit('fail', err);
    throw err;
  }
}

// 处理获取用户信息
function handleGetUserProfile() {
  if (!privacyChecked.value) {
    uni.showToast({
      title: '请先阅读并同意用户协议和隐私政策',
      icon: 'none'
    });
    return;
  }

  loading.value = true;
  
  // 微信要求getUserProfile必须由用户点击直接触发，这里不使用任何Promise
  const apiName = uni.getSystemInfoSync().platform === 'mac' ? 'getUserInfo' : 'getUserProfile';
  
  uni[apiName]({
    lang: 'zh_CN',
    desc: '授权信息仅用于用户登录',
    success: (res) => {
      console.log('获取用户信息成功:', res);
      
      // 获取用户基本信息
      const userInfo = res.userInfo || {};
      
      // 成功获取用户信息后，再获取登录code
      uni.login({
        provider: 'weixin',
        success: (loginRes) => {
          // 保存用户信息和code
          userProfileInfo.value = {
            ...res,
            code: loginRes.code,
            userInfo: userInfo
          };
          
          console.log('用户基本信息:', userInfo);
          
          // 进入下一步获取手机号
          loginStep.value = 2;
          loading.value = false;
        },
        fail: (loginErr) => {
          console.error('获取登录凭证失败:', loginErr);
          uni.showToast({
            title: '获取登录凭证失败，请重试',
            icon: 'none'
          });
          loading.value = false;
        }
      });
    },
    fail: (err) => {
      console.error('获取用户信息失败:', err);
      uni.showToast({
        title: '获取用户信息失败，请重试',
        icon: 'none'
      });
      emit('fail', { message: '获取用户信息失败', error: err });
      loading.value = false;
    }
  });
}

// 处理获取手机号
async function handleGetPhoneNumber(e: any) {
  console.log('获取手机号事件触发:', e);

  // 检查事件对象格式
  if (!e || typeof e !== 'object') {
    console.error('获取手机号事件对象异常:', e);
    uni.showToast({
      title: '手机号获取异常，请重试',
      icon: 'none'
    });
    return;
  }

  // 输出详细的事件数据，帮助调试
  console.log('手机号授权事件详情:', JSON.stringify(e));

  if (!privacyChecked.value) {
    uni.showToast({
      title: '请先阅读并同意用户协议和隐私政策',
      icon: 'none'
    });
    return;
  }
  
  // 如果用户拒绝授权
  if (e.detail?.errMsg && e.detail.errMsg.includes('deny')) {
    uni.showToast({
      title: '您已拒绝授权获取手机号，无法完成注册',
      icon: 'none'
    });
    emit('fail', { errMsg: '用户拒绝授权手机号' });
    return;
  }
  
  // 微信官方文档说明：getPhoneNumber回调获取到微信服务器返回的加密数据
  // 检查必要的加密数据是否存在
  const phoneCode = e.detail?.code; // 获取手机号的code
  if (!phoneCode) {
    console.error('未获取到手机号code:', e.detail);
    uni.showToast({
      title: '获取手机号失败，请重试',
      icon: 'none'
    });
    emit('fail', { errMsg: '未获取到手机号code' });
    return;
  }
  
  if (!userProfileInfo.value) {
    uni.showToast({
      title: '请先完成微信授权',
      icon: 'none'
    });
    loginStep.value = 1;
    return;
  }
  
  try {
    loading.value = true;
    console.log('开始登录流程');

    // 直接使用之前保存的用户code
    const loginCode = userProfileInfo.value.code;
    
    if (!loginCode) {
      throw new Error('获取登录凭证失败');
    }
    
    console.log('使用登录凭证:', loginCode);
    console.log('用户信息:', userProfileInfo.value);
    console.log('手机号code:', phoneCode);
    
    // 构建登录数据，直接传递手机号code给后端
    const loginData = {
      code: loginCode,
      phoneCode: phoneCode, // 将手机号code直接传给后端
      nickName: userProfileInfo.value?.userInfo?.nickName,
      avatarUrl: userProfileInfo.value?.userInfo?.avatarUrl,
      gender: userProfileInfo.value?.userInfo?.gender
    };
    
    console.log('发送登录请求数据:', JSON.stringify(loginData));
    
    // 调用登录接口，使用新的 wxMiniLogin 接口
    // @ts-ignore
    const loginRes = await service.user.login.wxMiniLogin(loginData);
    
    // 设置token
    user.setToken(loginRes);
    
    // 获取用户信息
    await user.get();
    
    // 登录成功提示
    uni.showToast({
      title: '登录成功',
      icon: 'success'
    });
    
    // 触发成功事件
    emit('success', { message: '登录成功' });
    
    // 关闭弹窗
    handleClose();
  } catch (error: any) {
    console.error('微信登录失败:', error);
    uni.showToast({
      title: error.message || '登录失败，请重试',
      icon: 'none'
    });
    emit('fail', error);
  } finally {
    loading.value = false;
  }
}

// 查看隐私政策
function handleViewPrivacy() {
  uni.navigateTo({
    url: '/pages/common/privacy'
  });
}

// 查看用户协议
function handleViewTerms() {
  uni.navigateTo({
    url: '/pages/common/terms'
  });
}

// 其他登录方式
function handleOtherLogin() {
  emit('otherLogin');
  handleClose();
}

// 监视visible属性变化
watch(() => props.visible, (newVal, oldVal) => {
  console.log('wx_login_popup.vue: visible变化', oldVal, '->', newVal);
  
  if (newVal) {
    // 显示弹窗时预加载微信登录所需的code
    wx.getCode();
    console.log('微信登录弹窗组件可见，准备获取code');
    // 重置登录状态
    loginStep.value = 1;
    userProfileInfo.value = null;
  }
}, { immediate: true });

// 组件挂载时
onMounted(() => {
  console.log('微信登录弹窗组件已挂载, 初始visible:', props.visible);
});
</script>

<style lang="scss" scoped>
.wx-login-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.2); /* 增加透明背景使其更明显 */
}

/* 小程序样式兼容 */
/* #ifdef MP-WEIXIN */
.wx-login-popup {
  width: 100%;
  height: 100vh;
}
/* #endif */

.wx-login-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99998 !important;
}

/* 小程序样式兼容 */
/* #ifdef MP-WEIXIN */
.wx-login-mask {
  width: 100%;
  height: 100vh;
}
/* #endif */

.wx-login-container {
  position: relative;
  width: 80%;
  max-width: 600rpx;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* 增加阴影 */
  z-index: 100000 !important;
}

.wx-login-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.wx-login-title {
  font-size: 18px;
  font-weight: bold;
  color: #111827;
}

.wx-login-close {
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wx-login-close-icon {
  font-size: 24px;
  line-height: 24px;
  height: 24px;
  width: 24px;
  color: #6b7280;
  text-align: center;
}

.wx-login-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
}

.wx-login-logo {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 16px;
  border-radius: 16px;
}

.wx-login-desc {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 32px;
  text-align: center;
}

.wx-login-btn-container {
  width: 100%;
}

.wx-login-btn {
  width: 100%;
  height: 44px;
  background-color: #07c160;
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  
  &:active {
    opacity: 0.9;
  }
}

.wx-login-btn-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  
  text {
    color: #fff;
    font-size: 16px;
    margin-left: 8px;
  }
}

/* 自定义图标样式 */
.wx-icon {
  display: inline-block;
  font-size: 24px;
  color: #fff;
}

.wx-icon-weixin::before {
  content: '\EA9B'; /* 微信图标的unicode */
}

.wx-icon-phone::before {
  content: '\E6DD'; /* 手机图标的unicode */
}

.wx-login-other-options {
  text-align: center;
  margin-top: 8px;
}

.wx-login-other-text {
  font-size: 14px;
  color: #6b7280;
  text-decoration: underline;
}

.wx-login-privacy {
  display: flex;
  align-items: flex-start;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.wx-login-checkbox {
  transform: scale(0.8);
  margin-right: 4px;
}

.wx-login-privacy-text {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
  flex: 1;
}

.wx-login-privacy-link {
  color: #ec4899;
}
</style> 